<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="telephone=no" name="format-detection">
    <title>完善资料 4/4</title>
    <script src="../../../js/jquery-1.8.3.min.js"></script>
    <script src="../../../js/mobile.js"></script>
    <!-- 根据额外需求引用fix.js -->
    <script src="./js/fix.js"></script>

    <script type="text/javascript" src="js/ruler.js"></script>
    <link rel="stylesheet" href="css/ruler.css" />
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/pefect_info.css">
    <link rel="stylesheet" href="./css/ksd.css">
</head>
<script>
    $(document).ready(function () {
        var h = $(document).height(); //页面总高度
        var h1 = $(window).height(); //页面显示区域高度
        var father = $(".unistyle").parent().height();
        if (h < h1 && h < father) {
            // alert("页面小于一屏");
            $(".btn").css("bottom", "3%");
        }
        var storage = window.localStorage;
        if (storage.length != 0) {
            var person = JSON.parse(storage.person_info);
            var weight = person.weight;
            $(".btn").on("click", function () {
                window.location.href = 'evaluation.html'
            });
        } else {
            window.location.href = 'homepagehtml.html'
        }
        var myDate = new Date(),
            year = myDate.getFullYear(),
            month = myDate.getMonth() + 1,
            date = myDate.getDate();
        $("#date").text(year + "年" + month + "月" + date + "日");
        //初始化尺子2
        var measureRuler1 = new MeasureRuler({
            wrapperId: "rulerWrapper1", //容器ID，页面中写一个DIV就行 (必须)
            max: weight, //刻度尺最大的刻度    (非必须，默认为1000)
            minUnit: 1, //刻度尺最小刻度    (非必须，默认为1)
            unitSet: 10, //刻度尺单元长度    (非必须，默认是10)
            value: weight, //初始化数值       (非必须，默认为1)
            mult: 1, //刻度值倍数，默认是最小刻度值为10px，如果定mult为3则最小刻度为30px (非必须，默认为1)
            callback: rulerSetValue1, //滑动尺子过程中的回调函数     (非必须)
            min: 10
        });

        function rulerSetValue1(val) {
            $(".rval1").html(val);
            var week_num = (weight - parseInt($("#aim_weight").text())) / parseInt($("#week_weight").text());
            week_num = week_num < 0 ? 0 : week_num;
            $(".number").text(Math.ceil(week_num));
            $("#finish_day").text((Math.ceil(week_num) * 7));
        };
        var measureRuler2 = new MeasureRuler({
            wrapperId: "rulerWrapper2", //容器ID，页面中写一个DIV就行 (必须)
            max: 40, //刻度尺最大的刻度    (非必须，默认为1000)
            minUnit: 1, //刻度尺最小刻度    (非必须，默认为1)
            unitSet: 10, //刻度尺单元长度    (非必须，默认是10)
            value: 3, //初始化数值       (非必须，默认为1)
            mult: 1, //刻度值倍数，默认是最小刻度值为10px，如果定mult为3则最小刻度为30px (非必须，默认为1)
            callback: rulerSetValue2, //滑动尺子过程中的回调函数     (非必须)
            min: 1
        });

        function rulerSetValue2(val) {
            $(".rval2").html(val);
            var week_num = (weight - parseInt($("#aim_weight").text())) / parseInt($("#week_weight").text());
            week_num = week_num < 0 ? 0 : week_num;
            $(".number").text(Math.ceil(week_num));
            $("#finish_day").text((Math.ceil(week_num) * 7));
        };
    });
</script>

<body>
    <div class="back">
        <div class="upcore-navbar">
            <span class="upcore-navbar-icon-left" onclick="history.back(-1)"></span>
            <span class="upcore-navbar-name-span">完善资料4/4</span>
            <br style="clear:both">
        </div>
        <div class="part1">
            <div class="cont" style="padding-top: 0.7rem;">
                <p class="title_font Regular">目标体重</p>
            </div>
            <div id="box">
                <p class="ruler1 Light"><span class="rval1 Medium" id="aim_weight">0</span>公斤</p>
                <div id="rulerWrapper1"></div>
            </div>
        </div>
        <div class="part2">
            <div class="cont" style="padding-top: 0.95rem;">
                <p class="title_font Regular">每周减重</p>
            </div>
            <div id="box1">
                <p class="ruler2 Light"><span class="rval2 Medium" id="week_weight">3</span>公斤</p>
                <div id="rulerWrapper2"></div>

            </div>
        </div>
        <div class="cont cont3_new"><span class="title_font Regular">预计达成时间</span></div>
        <div>
            <div style="text-align: center">
                <span class="number Medium">26</span>
                <span class="letter Light">周</span>
            </div>
        </div>
        <div class="cont unistyle Light">
            <span id="date">2019年5月23日</span>，<span id="finish_day">182</span>天后完成
        </div>
        <button class="btn Light">完成</button>
    </div>
</body>

</html>